<template>
  <!-- 文章添加 -->
  <div class="contractInfo box">
    <el-card
      shadow="never"
      :header="$route.query.mode == 'add' ? '添加' : '编辑'"
      class="item-background"
      style="width: 100%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="addForm"
        label-width="auto"
        label-position="right"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="form.title"
            clearable
            maxlength="30"
            show-word-limit
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input
            v-model="form.author"
            clearable
            placeholder="请输入作者姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="digest" style="width: 100%">
          <el-input
            v-model="form.digest"
            type="textarea"
            rows="3"
            clearable
            maxlength="120"
            show-word-limit
            placeholder="请输入文章摘要"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="imgUrl">
          <sc-upload
            v-model="form.imgUrl"
            :apiObj="apiObj"
            :limit="1"
            :showFileList="false"
            :modelValue="form.imgUrl"
            accept="image/gif, image/jpeg, image/png,image/bmp,image/jpg"
            :maxSize="10"
            title="请上传10M内的图片"
            @getImgData="getImgData"
          >
          </sc-upload>
        </el-form-item>
        <el-form-item label="内容" prop="content" style="width: 100%">
          <sc-editor
            v-model="form.content"
            placeholder="请输入文章内容"
            :height="750"
            :toolbar="toolbar"
          ></sc-editor>
        </el-form-item>
        <el-form-item label="原文URL" style="width: 100%">
          <el-input
            v-model="form.contentSourceUrl"
            clearable
            placeholder="请输入原文地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item
            label="排序"
            style="width: 100%"
            v-if="$route.query.mode == 'edit'"
          >
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-form-item>
        <!-- <el-form-item label="是否打开评论">
          <el-switch
            v-model="form.needOpenComment"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
          <el-radio-group
            v-model="form.onlyFansCanComment"
            v-show="form.needOpenComment == 1"
            style="margin-left: 20px"
          >
            <el-radio :label="0">所有人可评论</el-radio>
            <el-radio :label="1">粉丝才可评论</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>

      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing"
          >保 存</el-button
        >
        <el-button @click="cencel">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
export default {
  name: 'customerAdd',
  data () {
    return {
      isSaveing: false,
      apiObj: this.$API.weChat.uploadImg,
      //表单数据
      form: {
        title: '',
        author: '',//作者
        digest: '',//摘要
        imgUrl: '',//素材url
        thumbMediaId: '',//图文消息的封面素材id
        content: '',//内容
        contentSourceUrl: '',//图文消息的原文地址，即点击“阅读原文”后的URL
        // needOpenComment: 0,//是否打开评论，0不打开(默认)，1打开
        // onlyFansCanComment: 0,//是否粉丝才可评论，0所有人可评论(默认)，1粉丝才可评论
      },
      toolbar: [
        'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image table  preview | selectall fullscreen'
      ],
      //验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', }
        ],
        imgUrl: [
          { required: true, message: '请上传文章封面图', }
        ],
      }
    }
  },
  components: {
    scEditor
  },
  mounted () {
    if (this.$route.query.mode == 'edit') {
      this.getArticleDetail()
      // this.form.sort = 0
    }

  },
  methods: {
    // 获取详情
    async getArticleDetail () {
      let { data } = await this.$API.weChat.getArticleDetail.get({ id: this.$route.query.id })
      this.form = data
    },
    // 获取封面图片信息
    getImgData (data) {
      console.log(data)
      this.form.thumbMediaId = data.media_id
    },
    save () {
      console.log(this.form)
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          let res = null
          let mode = this.$route.query.mode
          this.isSaveing = true
          if (mode == 'add') {
            res = await this.$API.weChat.addArtcle.post(this.form)
          } else if (mode == 'edit') {
            delete this.form.createTime
            delete this.form.updateTime
            res = await this.$API.weChat.updateArtcle.post(this.form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.closeSelectedTag(this.$route)
            this.$router.push({
              path: '/weChat/article'
            })
            this.$message.success("操作成功")
          }
        }
      })
    },

    // 取消添加
    cencel () {
      this.closeSelectedTag(this.$route)
      this.$router.push({
        path: '/produce/deliverManagement'
      })
    },
    //关闭tag
    closeSelectedTag (tag) {
      this.$store.commit("removeViewTags", tag)
      this.$store.commit("removeIframeList", tag)
      this.$store.commit("removeKeepLive", tag.name)
    },
  }

}

</script>
<style lang='scss' scoped>
.box {
  margin: 10px;
}

.formBox {
  padding: 30px;
  background: #fff;
  .el-form {
    width: 100%;
  }
}
.button {
  margin-top: 50px;
  padding-left: 60px;
}
</style>